<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="6">
        <Card>
          <template #header>
           <span>总销售额</span>
           <span><svg t="1652686155422" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2034" width="16" height="16"><path d="M512 65.984C266.048 65.984 65.984 266.048 65.984 512S266.048 958.016 512 958.016 958.016 757.952 958.016 512 757.952 65.984 512 65.984zM544 736c0 17.696-14.304 32-32 32s-32-14.304-32-32l0-288c0-17.696 14.304-32 32-32s32 14.304 32 32L544 736zM512 352c-26.496 0-48-21.536-48-48C464 277.472 485.504 256 512 256s48 21.472 48 48C560 330.464 538.496 352 512 352z" p-id="2035" fill="#1296db"></path></svg></span>
          </template>

          <template #content>
            销售额为：12164654
          </template>

          <template #charts>
            <span>周同比 56.67%  
              <svg t="1652688534655" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2934" width="16" height="16"><path d="M131.339914 423.017198c-9.52111 9.670597-9.400291 25.229558 0.270306 34.750668 9.670597 9.522134 25.229558 9.401315 34.750668-0.269282l320.722863-325.740925 0 798.397108c0 13.5716 11.001648 24.573248 24.573248 24.573248 13.5716 0 24.573248-11.001648 24.573248-24.573248L536.230246 135.522485l315.80719 320.551874c9.523157 9.667525 25.084167 9.783224 34.750668 0.259043 9.667525-9.524181 9.784248-25.083143 0.259043-34.750668L552.305246 81.813557c-11.058985-11.331339-25.865391-17.688643-41.702849-17.905707-0.277473-0.004096-0.554946-0.005119-0.832419-0.005119-15.559985 0-30.237381 5.957989-41.412066 16.831651-0.124914 0.121842-0.249828 0.245732-0.372694 0.370646L131.339914 423.017198z" p-id="2935" fill="#1afa29"></path></svg>
              周同比 56.67% 
              <svg t="1652688576184" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3839" width="16" height="16"><path d="M467.985218 937.525717c0.122866 0.124914 0.24778 0.248804 0.372694 0.370646 11.174684 10.873662 25.852081 16.831651 41.412066 16.831651 0.277473 0 0.554946-0.001024 0.832419-0.005119 15.837458-0.217064 30.643864-6.574368 41.702849-17.905707l334.741901-339.769178c9.525205-9.667525 9.408482-25.226487-0.259043-34.750668-9.666501-9.524181-25.227511-9.408482-34.750668 0.259043l-315.80719 320.551874L536.230246 88.475979c0-13.5716-11.001648-24.573248-24.573248-24.573248-13.5716 0-24.573248 11.001648-24.573248 24.573248l0 798.397108L166.360888 561.132161c-9.52111-9.670597-25.080071-9.791415-34.750668-0.269282-9.670597 9.52111-9.791415 25.080071-0.270306 34.750668L467.985218 937.525717z" p-id="3840" fill="#d81e06"></path></svg>
              </span>
          </template>

          <template #footer>
            <span>日销售额￥ 12423</span>
          </template>
        </Card>
      </el-col>
      <el-col :span="6">
        <Card>
          <template #header>
           <span>总销售额</span>
           <span><svg t="1652686155422" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2034" width="16" height="16"><path d="M512 65.984C266.048 65.984 65.984 266.048 65.984 512S266.048 958.016 512 958.016 958.016 757.952 958.016 512 757.952 65.984 512 65.984zM544 736c0 17.696-14.304 32-32 32s-32-14.304-32-32l0-288c0-17.696 14.304-32 32-32s32 14.304 32 32L544 736zM512 352c-26.496 0-48-21.536-48-48C464 277.472 485.504 256 512 256s48 21.472 48 48C560 330.464 538.496 352 512 352z" p-id="2035" fill="#1296db"></path></svg></span>
          </template>

          <template #content>
            销售额为：12164654
          </template>

          <template #charts>
            <LineCharts />
          </template>

          <template #footer>
            <span>日销售额￥ 12423</span>
          </template>
        </Card>
        </el-col>
      <el-col :span="6">
        <Card>
          <template #header>
           <span>总销售额</span>
           <span><svg t="1652686155422" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2034" width="16" height="16"><path d="M512 65.984C266.048 65.984 65.984 266.048 65.984 512S266.048 958.016 512 958.016 958.016 757.952 958.016 512 757.952 65.984 512 65.984zM544 736c0 17.696-14.304 32-32 32s-32-14.304-32-32l0-288c0-17.696 14.304-32 32-32s32 14.304 32 32L544 736zM512 352c-26.496 0-48-21.536-48-48C464 277.472 485.504 256 512 256s48 21.472 48 48C560 330.464 538.496 352 512 352z" p-id="2035" fill="#1296db"></path></svg></span>
          </template>

          <template #content>
            销售额为：12164654
          </template>

          <template #charts>
            <BarCharts />
          </template>

          <template #footer>
            <span>日销售额￥ 12423</span>
          </template>
        </Card>
        </el-col>
      <el-col :span="6">
        <Card>
          <template #header>
           <span>总销售额</span>
           <span><svg t="1652686155422" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2034" width="16" height="16"><path d="M512 65.984C266.048 65.984 65.984 266.048 65.984 512S266.048 958.016 512 958.016 958.016 757.952 958.016 512 757.952 65.984 512 65.984zM544 736c0 17.696-14.304 32-32 32s-32-14.304-32-32l0-288c0-17.696 14.304-32 32-32s32 14.304 32 32L544 736zM512 352c-26.496 0-48-21.536-48-48C464 277.472 485.504 256 512 256s48 21.472 48 48C560 330.464 538.496 352 512 352z" p-id="2035" fill="#1296db"></path></svg></span>
          </template>

          <template #content>
            销售额为：12164654
          </template>

          <template #charts>
            <ProgressCharts />
          </template>

          <template #footer>
            <span>日销售额￥ 12423</span>
          </template>
        </Card>
        </el-col>
      
    </el-row>
  </div>
</template>

<script>
import Card from "./Card";
import LineCharts from './LineCharts'
import BarCharts from './BarCharts'
import ProgressCharts from './ProgressCharts'
export default {
  name: "Header",
  components: {
    Card,
    LineCharts,
    BarCharts,
    ProgressCharts
  },
};
</script>

<style>
</style>